---
title: Tags
page-header: Tags
page-menu: base.tags
layout: default
permalink: tags.html
---

{% assign tag-icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}

<div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Default tags</h3>
				<div class="tags-list">   
					{% for i in (1..14) %}     
					{% capture text %}Label {{ i }}{%- endcapture %}
					{% include "ui/tag.html" text=text %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with flag</h3>
				<div class="tags-list">   
					{% for country in flags limit: 9 %}     
					{% include "ui/tag.html" text=country.name flag=country.code %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with icon</h3>
				<div class="tags-list">   
					{% for icon in tag-icons %}     
					{% include "ui/tag.html" text=icon icon=icon %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with avatar</h3>
				<div class="tags-list">   
					{% for person in people limit: 8 %}     
					{% include "ui/tag.html" text=person.full_name person=person %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with status</h3>
				<div class="tags-list">   
					{% for color in site.colors %}
					{% capture status %}{{ color[1].class }}{%- endcapture %}
					{% capture text %}{{ color[1].title }}{%- endcapture %}
					{% include "ui/tag.html" text=text status=status %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with legend</h3>
				<div class="tags-list">   
					{% for color in site.colors %}
					{% capture status %}{{ color[1].class }}{%- endcapture %}
					{% capture text %}{{ color[1].title }}{%- endcapture %}
					{% include "ui/tag.html" text=text legend=status %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Default tags</h3>
				<div class="tags-list">   
					{% for i in (1..6) %}     
					{% capture text %}Label {{ i }}{%- endcapture %}
					{% include "ui/tag.html" text=text checkbox=true %}
					{% endfor %}
					{% for i in (7..12) %}     
					{% capture text %}Label {{ i }}{%- endcapture %}
					{% include "ui/tag.html" text=text checkbox=true checked=true %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Default tags</h3>
				<div class="tags-list">   
					{% for i in (1..12) %}     
					{% include "ui/tag.html" text="Label" badge=i %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>